<template>
	<view class="content">
		<view v-if="showModal">
			<modal :msg="title"></modal>
		</view>
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
			</view>
			<view class="head-title">
				<image class="img" :src="logo" mode=""></image>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask">
				</image>
			</view>
		</view>
		<swiper class="banner" indicator-dots circular autoplay>
			<swiper-item class="banner-item" v-for="(item,index) in SwiperList" :key="item.index" @click="to(item)">
				<image mode="aspectFill" class="banner-iamge" :src="item.img" @click="ewsandBtn(item,index)"></image>
			</swiper-item>
		</swiper>

		<view class="lisibox">
			<view class="shujulist">
				<view class="shuju">
					<view class="title">{{$data.$language.wone1}}</view>
					<view class="num">{{wone}}</view>
				</view>
				<view class="shuju">
					<view class="title">{{$data.$language.wone3}}</view>
					<view class="num">{{circulate}}</view>
				</view>
				<view class="shuju">
					<view class="title">{{$data.$language.wone5}}</view>
					<view class="num">{{devastate}}</view>
				</view>
			</view>
		</view>

		<!-- <image src="/static/model2.png" mode="widthFix" @click="toWealth" v-if="langImg"></image>
		<image src="../../static/qukuailian_slices/bianzu 4@2x.png" @click="toWealth" mode="" v-if="!langImg"></image> -->
		<view class="bingis" @click="toWealth">
			<image src="/static/BXimg.png" mode="widthFix"></image>
			<view class="box-title">
				{{$data.$language.textsims}}
			</view>
			<view class="box-txte">
				{{$data.$language.texttow}}
			</view>
		</view>
		<!-- <image src="/static/model1.png" mode="widthFix" @click="toBuyNodes" v-if="langImg"></image>
		<image src="/static/qukuailian_slices/bianzu 6.png" mode="widthFix" @click="toBuyNodes" v-if="!langImg"></image> -->
		<view class="bingis" @click="toBuyNodes">
			<image src="/static/moinsu.png" mode="widthFix"></image>
			<view class="b-tow-title">
				{{$data.$language.tsOne}}
			</view>
			<view class="b-tow-text">
				<view class="v-imsex">
					<span></span>{{$data.$language.tsfire}}
				</view>
				<view class="v-imsex">
					<span></span>{{$data.$language.tsixs}}
				</view>
			</view>
			<view class="b-tow-text">
				<view class="v-imsex">
					<span></span>{{$data.$language.tsseven}}
				</view>
			</view>
			<view class="b-tow-title" style="padding-top: 40rpx;">
				{{$data.$language.tsTow}}
			</view>
			<view class="b-tow-text">
				<view class="v-imsex">
					<span></span>{{$data.$language.tsfire}}
				</view>
				<view class="v-imsex">
					<span></span>{{$data.$language.tsixs}}
				</view>
			</view>
			<view class="b-tow-text">
				<view class="v-imsex">
					<span></span>{{$data.$language.tseight}}
				</view>
			</view>
		</view>
		
		<view class="statistics">
			<view class="title">
				<view :class="indexSHows==1?'ationveslis':''" @click="qiunDataBtn(1)">
					WONE
				</view>
				<view :class="indexSHows==2?'ationveslis':''" @click="qiunDataBtn(2)">
					WOO
				</view>
			</view>
			<view v-if="indexSHows==1">
				<qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true" :ontouch="true"
					:onzoom="true"  :echartsApp="true" />
			</view>
			<view class="charts-box" v-if="indexSHows==2">
				<!-- <view class="boxminwoo">
					WOO
				</view>
				<view class="boxtime">
					<view :class="index==5 ? 'ationve':''"  v-for="(item,index) in TimeDate">
						{{item}}天
					</view>
				</view> -->
				<view class="char-weigth">
					<!-- <qiun-data-charts type="area" :opts="opts"  :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :onzoom="true"
						:disableScroll="true" :ontouch="true" :chartData="chartsDataLine4" :echartsH5="true"
						:echartsApp="true" /> -->
					<qiun-data-charts type="candle" :opts="opts" :chartData="chartsDataLine4" :disableScroll="true" :ontouch="true"
						:onzoom="true"  :echartsApp="true" />
				</view>
				
			</view>
			
			
		</view>

		<view style="width: 100%;height: 66px;">
			
		</view>
	</view>

</template>

<script>
	import Web3 from 'web3';
	import modal from "../../my-components/modal.vue"
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'

	import {
		getHomeData,
		getLogin,
		getBind,
		getUser,
		getMYsix,
		wooKentins,
	} from '@/api/index.js';

	// var langImg = uni.getStorageSync('locale')=='zh-CN'
	// console.log(langImg,'langImg')
	export default {
		// watch:{
		// 	langg(){
		// 		return uni.getStorageSync('locale')=='en-US'? enUS:zhCN
		// 	}
		// },

		data() {
			return {
				indexSHows:1,
				TimeDate:['1','2','3','4','5','6','7'],
				chartsDataLine4: {
					categories:[],
					series:[{data:[]}],
				},
					showModal: false,
					// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
					langImg: uni.getStorageSync('locale') == 'tr-CN',
					isDrawerOpen: false,
					isOpenMask: false,
					wone: '',
					circulate: '',
					devastate: '',
					wone_k: [],
					title: '传值',
					// logo: '../../static/qukuailian2_slices/121688045529_.pic.png',
					// logo: '../../static/shequ/logonImageis.png',
					logo: '../../static/shequ/monbtn.png',
					SweListData:[],
					SwiperList: [],
					bannerList: ['../../static/swiper/swiperimg.png','../../static/swiper/swiperimg1.png','../../static/swiper/swiperimg4.png'],
					SwiperImage: ['../../static/swiper/swiperimg.png','../../static/swiper/swiperimg2.png','../../static/swiper/swiperimg3.png'],
					chartData: {},
					opts: {
						timing: "easeOut",
						duration: 1000,
						rotate: false,
						rotateLock: false,
						color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
							"#ea7ccc"
						],
						padding: [15, 15, 0, 30],
						fontSize: 13,
						fontColor: "#666666",
						dataLabel: false,
						dataPointShape: true,
						dataPointShapeType: "solid",
						touchMoveLimit: 60,
						enableScroll: true,
						enableMarkLine: false,
						legend: {
							show: false,
							position: "bottom",
							float: "center",
							padding: 0,
							margin: 0,
							backgroundColor: "rgba(0,0,0,0)",
							borderColor: "rgba(0,0,0,0)",
							borderWidth: 0,
							fontSize: 13,
							fontColor: "#666666",
							lineHeight: 11,
							hiddenColor: "#CECECE",
							itemGap: 10
						},
						xAxis: {
							labelCount: 4,
							itemCount: 40,
							disableGrid: true,
							gridColor: "#CCCCCC",
							gridType: "solid",
							dashLength: 4,
							scrollShow: false,
							scrollAlign: "left",
							scrollColor: "#A6A6A6",
							scrollBackgroundColor: "#EFEBEF",
							disabled: false,
							axisLine: true,
							axisLineColor: "#CCCCCC",
							calibration: false,
							fontColor: "#666666",
							fontSize: 13,
							lineHeight: 20,
							marginTop: 0,
							rotateLabel: false,
							rotateAngle: 45,
							boundaryGap: "center",
							splitNumber: 5,
							gridEval: 1,
							title: "",
							titleFontSize: 13,
							titleOffsetY: 0,
							titleOffsetX: 0,
							titleFontColor: "#666666",
							format: ""
						},
						yAxis: {
							disabled: false,
							disableGrid: false,
							splitNumber: 5,
							gridType: "solid",
							dashLength: 8,
							gridColor: "#CCCCCC",
							padding: 10,
							showTitle: false,
							data: [{
								position: 'right'
							}]
						},
						extra: {
							candle: {
								color: {
									upLine: "#5EC6A3",
									// upFill: "#f04864",
									upFill: "#5EC6A3",
									downLine: "#2fc25b",
									downFill: "#2fc25b"
								},
								average: {
									show: false,
									name: [
										"MA5",
										"MA10",
										"MA30"
									],
									day: [
										5,
										10,
										20
									],
									color: [
										"#1890ff",
										"#2fc25b",
										"#facc14"
									]
								}
							},
							markLine: {
								type: "dash",
								dashLength: 5,
								data: [{
										value: 2150,
										lineColor: "#f04864",
										showLabel: true
									},
									{
										value: 2350,
										lineColor: "#f04864",
										showLabel: true
									}
								]
							},
							tooltip: {
								showBox: true,
								showArrow: true,
								showCategory: false,
								borderWidth: 0,
								borderRadius: 0,
								borderColor: "#000000",
								borderOpacity: 0.7,
								bgColor: "#000000",
								bgOpacity: 0.7,
								gridType: "solid",
								dashLength: 4,
								gridColor: "#CCCCCC",
								boxPadding: 3,
								fontSize: 13,
								lineHeight: 20,
								fontColor: "#FFFFFF",
								legendShow: true,
								legendShape: "auto",
								splitLine: true,
								horizentalLine: false,
								xAxisLabel: false,
								yAxisLabel: false,
								labelBgColor: "#FFFFFF",
								labelBgOpacity: 0.7,
								labelFontColor: "#666666"
							}
						}
					},
				}
			},
			onLoad() {
				// console.log(Web3,'54555')
					var translate = uni.getStorageSync('locale')
					if (translate == 'en-US') {
						this.$data.$language = enUS
						this.SwiperList = this.SwiperImage
					} else if (translate == 'zh-CN') {
						this.$data.$language = zhCN
					} else {
						this.$data.$language = trCN
						this.SwiperList = this.bannerList
					}
					var token = uni.getStorageSync('token')
					if(token){
						this.loadData(); // 在页面加载时调用请求数据的方法
						this.loagistxs()
					}else{
						// this.getcurentAddress()
					}

				},
				mounted() {

				},
				onUnload(){
					console.log('页面关闭')
				},
				onShow(){
					this.isDrawerOpen = false
					var token = uni.getStorageSync('token')
					if(token){
						console.log('执行了')
						this.wooKentinsList()
					}
					this.getcurentAddress()
				},

				methods: {
					// 获取当前钱包
					async getcurentAddress() {
						const accounts = await ethereum.request({
							method: 'eth_requestAccounts'
						});
						console.log(accounts,'获取当前钱包')
						var accountsUmonsbui = uni.getStorageSync('accountsUrl')
						// accounts[0] = '0xd9a1990ffd1fe9ce07de6f9fc76212cf4c15c29a'
						if(!accountsUmonsbui){
							this.login(accounts[0])
							console.log('开始登录')
						}else if(accountsUmonsbui != accounts[0]){
							console.log('两个code不一样登录')
							this.login(accounts[0])
						}
						let token = uni.setStorageSync('accountsUrl', accounts[0])
					},
					login(url){
						var that = this
							getLogin({
										url:url,
									},
								(data) => {
									// 处理成功返回的数据
									console.log(data.userinfo.token, 'data')
									let token = uni.setStorageSync('token', data.userinfo.token) 
									uni.setStorageSync('locale', 'tr-CN')
									that.loadData(); // 在页面加载时调用请求数据的方法
									that.loagistxs()
									that.wooKentinsList()
									
								},
								(errorMsg) => {
									// 处理请求失败或错误的情况
									console.error(errorMsg);
								},
							);
						
					},
					wooKentinsList(){
						wooKentins(
							(data) => {
								// 处理成功返回的数据
								console.log(data, 'dat我的意识到')
								this.monxbunbc(data)
							},
							(errorMsg) => {
								// 处理请求失败或错误的情况
								console.error(errorMsg);
							}
						)
					},
					monxbunbc(data){
						var monsd=[]
						var arr = []
						data.t.forEach((e,index)=>{
							let date = new Date(e*1000);
							let month = date.getMonth() + 1;
							 month = month < 10 ? ('0' + month) : month;//月补0
							let day = date.getDate();
							day = day < 10 ? ('0' + day) : day;//天补0
							let hours = date.getHours();
							 hours = hours < 10 ? ('0' + hours) : hours;//小时补0
							let minutes = date.getMinutes();
							 minutes = minutes < 10 ? ('0' + minutes) : minutes;//分钟补0
							// console.log(minutes,'时间')
							var monens = month+ '/'+day+" "+hours+":"+minutes
							monsd.push(monens)
							arr[index] = [data.o[index], data.c[index], data.l[index], data.h[index]]
						})
						this.chartsDataLine4.categories = monsd
						this.chartsDataLine4.series[0].data = arr
						// this.chartsDataLine4.series[0].data.push(data.h)
						// this.chartsDataLine4.series[0].data.push(data.l)
						// this.chartsDataLine4.series[0].data.push(data.c)
						// console.log(this.chartsDataLine4,'monshdh好的v会比较')
						// uni.setStorageSync('token', data.userinfo.token)
					},
					//新闻资讯
					ewsandBtn(item,index){
						// uni.navigateTo({
						// 	url:'/pages/ewsand/ewsand?id=' + item.id
						// })
						console.log(item.url)
						// uni.openUrl({
						// 	url:item.url
						// })
						
						window.location.href= item.url
					},
					qiunDataBtn(index){
						this.indexSHows = index
						this.wooKentinsList()
					},
					// 获取自己资料
					loagistxs() {
						getMYsix((data) => {
								console.log(data.data)
								this.maxData = data.data
								// this.maxData.node_id = 1
								if (data.data.parent_id == 0 || data.data.parent_id == '' || data.data.parent_id ==null || data.data.parent_id == undefined) {
									this.showModal = true
								} else {
									// this.showModal = true
								}
							},
							(errorMsg) => {
								var that = this
								uni.clearStorage()
								that.getcurentAddress()
								// 处理请求失败或错误的情况
								console.error(errorMsg);
							}
						);
					},
					refreshLanguage(locale) {
						if (locale === 'zh-CN') {
							this.$language = zhCN
						} else if (locale === 'en-US') {
							this.$language = enUS
							this.SwiperList = this.SwiperImage
						} else {
							this.$language = trCN
							this.SwiperList = this.bannerList
						}
						uni.reLaunch({
							url: '/pages/index/index' // 当前页面的lujing
						});

					},
					toWealth() {
						uni.navigateTo({
							url: '/pages/wealth/wealth'
						})
					},
					toBuyNodes() {
						uni.navigateTo({
							url: '/pages/buyNodes/buyNodes'
						})
					},
					openDrawer() {
						this.isDrawerOpen = true
					},
					closeDrawer() {
						this.isDrawerOpen = false
					},
					openMask() {
						this.isOpenMask = true
						// console.log(this.isOpenMask,"isopenmask");
					},
					closeMask() {
						this.isOpenMask = false; // 遮罩层guanbi事件处理
						// console.log(this.isOpenMask,"isopenmask--false");
					},
					loadData() {
						this.bannerList = []
						this.SwiperImage = []
						getHomeData(
							(data) => {
								// 处理成功返回的数据
								this.wone = data.wone;
								this.wone_k = data.wone_k;
								this.circulate = data.circulate;
								this.devastate = data.devastate;
								this.SweListData = data.banner
								data.banner.forEach(e=>{
									var listImgCN = {
										img:'http://api.wonewoo.com'+e.image,
										id:e.id,
										url:e.url
									}
									var listImgEN = {
										img:'http://api.wonewoo.com'+e.en_image,
										id:e.id,
										url:e.url
									}
									this.bannerList.push(listImgCN)
									this.SwiperImage.push(listImgEN)
								})
								var translate = uni.getStorageSync('locale')
								if (translate == 'en-US') {
									this.SwiperList = this.SwiperImage
								} else {
									this.SwiperList = this.bannerList
								}
								this.getServerData()
								// console.log('wone:', wone);
								console.log('wone_kbannerList:', this.SwiperList);
							},
							(errorMsg) => {
								
								// 处理请求失败或错误的情况
								// console.error(errorMsg,'15489');
							}
						);
						// getLogin(
						// 	(data) => {
						// 		// 处理成功返回的数据
						// 		let token = uni.getStorageSync('token', data.userinfo.token)
						// 		// token=null
						// 	},
						// 	(errorMsg) => {
						// 		// 处理请求失败或错误的情况
						// 		console.error(errorMsg);
						// 	}
						// )
						getUser(
							(data) => {
								// 处理成功返回的数据
								console.log(data, 'data')
								// let obj = {
								// 	type:0,
								// 	datas:data
								// }
								// console.log(obj, 'data')
								if (data) {
									this.$refs.modes.show = false
								} else {
									this.$refs.modes.show = true
								}
								// uni.setStorageSync('token', data.userinfo.token)
							},
							(errorMsg) => {
								// 处理请求失败或错误的情况
								console.error(errorMsg);
							}
						)

					},
					getServerData() {
						//模拟从服务器获取数据时的延时
						setTimeout(() => {
							//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
							let res = {
								categories: [],
								series: [{
									name: "",
									data: []
								}]
							};

							let arr = []
							this.wone_k.map((item, index) => {
								console.log(item, index, 'mapdata');
								let timeDate = item.date;
								let Time = new Date(timeDate);
								let timestemp = Time.getTime();
								const dates = new Date(timestemp);
								const year = dates.getFullYear();
								const month = dates.getMonth() + 1;
								const day = dates.getDate();
								const hours = dates.getHours();
								const minutes = dates.getMinutes();
								const seconds = dates.getSeconds();
								
								const formattedDate = `${month}/${day}`;
								res.categories.push(formattedDate)
								// Number(item.bgin_usdt)
								// let nList = []
								// nList.push(item.bgin_usdt,item.usdt,item.lowest_usdt,item.max_usdt)
								arr[index] = [item.bgin_usdt, item.usdt, item.lowest_usdt, item.max_usdt]
							})
							res.series[0].data = arr
							 
							res.series[0].data = res.series[0].data.reverse();
							res.categories = res.categories.reverse();
							console.log(res, 'resdata');
							this.chartData = JSON.parse(JSON.stringify(res));
							console.log(this.chartData, "this.chartData数据")
						}, 500);
					},

				},
				components: {
					modal,
					drawer,
					languageMask
				}
		}
</script>

<style lang="less">
	.charts-box {
		width: 100%;
		min-height: 680rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-top: 24rpx;
		.char-weigth{
			width: 100%;
			height: 680rpx;
		}
		.boxminwoo{
			width: 100%;
			text-align: center;
			font-size: 31rpx;
			line-height: 38px;
		}
		.boxtime{
			width: 100%;
			display: flex;
			justify-content: space-around;
			view{
				font-size: 24rpx;
				font-weight: 400;
				color: #919191;
			}
			.ationve{
				font-weight: 600;
				color: #2C2C2C;
			}
		}
	}

	.content {
		width: calc(100% - 48rpx);
		margin: auto;
	}

	.bingis {
		width: 100%;
		height: 392rpx;
		position: relative;

		// margin-top: 24rpx;
		.box-title {
			width: 100%;
			color: #0762FF;
			font-size: 36rpx;
			font-weight: bold;
			position: relative;
			z-index: 1;
			padding-left: 60rpx;
			padding-top: 80rpx;
			box-sizing: border-box;
		}

		.box-txte {
			width: 100%;
			color: #0762FF;
			font-size: 30rpx;
			font-weight: bold;
			position: relative;
			z-index: 1;
			padding-left: 60rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
		}

		.b-tow-title {
			width: 100%;
			color: #0762FF;
			font-size: 30rpx;
			font-weight: bold;
			position: relative;
			z-index: 1;
			padding-left: 60rpx;
			padding-top: 60rpx;
			box-sizing: border-box;
		}

		.b-tow-text {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			padding-left: 60rpx;
			box-sizing: border-box;
			z-index: 1;

			.v-imsex {
				padding-top: 14rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #000000;
				margin-right: 24rpx;
				position: relative;
				padding-left: 12rpx;
				box-sizing: border-box;

				span {
					position: absolute;
					left: 0;
					top: 59%;
					transform: translateX(-50%);
					display: inline-block;
					width: 6rpx;
					height: 6rpx;
					background-color: red;
					border-radius: 50%;
					margin-right: 6rpx;
				}
			}
		}

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
	}

	.nodes {
		width: 363px;
		height: 195px;
		margin-left: 6px;
	}

	.statistics {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 0px rgba(229, 235, 247, 0.5);
		border-radius: 12px;
		overflow: hidden;
		margin-top: 24rpx;
		padding: 36rpx 0;
	}

	.statistics .title {
		width: 100%;
		// text-align: center;
		display: flex;
		justify-content: space-around;
	}
	.statistics .title view{
		font-size: 16px;
		line-height: 56rpx;
		color: #919191;
	}
	.statistics .title .ationveslis{
		color: #000000;
		font-weight: 600;
	}

	.head {
		display: flex;
		box-sizing: border-box;
		color: #333;
		align-items: center;
		width: 100%;
		z-index: 999;
		margin-top: var(--status-bar-height);
		padding: 40rpx 16rpx;
		justify-content: space-between;
	}

	.head-title {
		.img {
			width: 138rpx;
			height: 54rpx;
			box-shadow: unset;
			margin-top: unset;
			border-radius: unset;
		}
	}

	.center-head {
		flex: 1;
		text-align: center;
		color: var(--c-ffffff-fontcolor1);
		font-size: 32rpx;
	}

	.right-head {
		text-align: right;
	}

	.iconfont {
		font-size: 40rpx;
		margin-left: 44rpx;
	}

	.banner {
		height: 270rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.banner-item {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	}

	.banner-iamge {
		width: 100%;
		height: 270rpx;
		border-radius: 20rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: unset;
	}


	.iconflex {
		flex: 1
	}

	.nav-title {
		color: var(--c-232728-fontcolor4);
	}

	::v-deep .u-search__content {
		width: 600rpx !important;
	}

	.lisibox {
		background-image: url('/static/ziliaobg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 24rpx;
		margin-top: 24rpx;
		overflow: hidden;
		width: 100%;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(229, 235, 247, 0.5);

	}

	.shujulist {
		padding: 36rpx 56rpx;
	}

	.shuju {
		margin-bottom: 30rpx;

		.title {
			font-size: 26rpx;
			color: #919191;
			font-weight: 400;
		}

		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
		}
	}

	.shuju:last-child {
		margin-bottom: 0;
	}

	image {
		width: 100%;
		margin-top: 24rpx;
		border-radius: 24rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(229, 235, 247, 0.5);
	}

	.language {
		width: 44rpx;
		height: 44rpx;
		object-fit: contain;
		box-shadow: unset;
		margin-top: unset;
		border-radius: unset;

	}

	.list {
		width: 30rpx;
		height: 28rpx;

		object-fit: contain;
		box-shadow: unset;
		margin-top: unset;
		border-radius: unset;
	}

	/*  */
</style>